<div
  *ngIf="activeEnvironment$ | async as activeEnvironment"
  class="d-flex flex-column h-100 p-2"
  [formGroup]="environmentProxyForm"
>
  <div class="input-group align-items-center mb-3">
    <div class="form-check">
      <input
        type="checkbox"
        class="form-check-input"
        id="env-proxy-mode"
        formControlName="proxyMode"
      />
      <label class="form-check-label" for="env-proxy-mode"
        >Enable proxy mode</label
      >
    </div>
    <div class="input-group-text">
      <app-svg
        icon="info"
        ngbTooltip="Calls to non-defined routes will be forwarded to the specified target URL"
      ></app-svg>
    </div>
  </div>

  <div class="input-group mb-3">
    <label for="env-proxy-host" class="col-form-label pe-2">Target URL</label>
    <input
      type="text"
      class="form-control col-4"
      id="env-proxy-host"
      formControlName="proxyHost"
    />
    <div class="input-group-text">
      <span
        class="text-warning"
        *ngIf="
          activeEnvironment.proxyHost &&
          !isValidURL(activeEnvironment.proxyHost)
        "
        ngbTooltip="The address must be a valid URL"
      >
        <app-svg icon="warning"></app-svg>
      </span>
    </div>
  </div>

  <div class="input-group align-items-center mb-3">
    <div class="form-check mb-0">
      <input
        type="checkbox"
        class="form-check-input"
        id="env-proxy-remove-prefix"
        formControlName="proxyRemovePrefix"
      />
      <label class="form-check-label" for="env-proxy-remove-prefix">
        Remove Prefix
      </label>
    </div>
    <div class="input-group-text">
      <app-svg
        icon="info"
        ngbTooltip="When enabled, the environment's prefix will not be forwarded to the remote proxied URL"
      ></app-svg>
    </div>
  </div>

  <!-- custom proxy headers -->
  <div class="d-flex flex-fill mh0 environment-proxy-headers">
    <div class="d-flex flex-column w-50">
      <div class="mt-2 mb-2">
        Proxy request headers
        <app-svg
          icon="info"
          ngbTooltip="Headers will be added to the request sent to the proxied server"
          class="ms-2"
        ></app-svg>
      </div>
      <div
        class="flex-fill h-100 scroll-content"
        #environmentProxyReqHeadersContainer
      >
        <app-headers-list
          id="env-proxy-req-headers"
          [activeDataSubject$]="activeEnvironment$"
          dataSubject="environment"
          headersPropertyName="proxyReqHeaders"
          (headersUpdated)="headersUpdated('proxyReqHeaders', $event)"
          (headerAdded)="scrollToBottom(environmentProxyReqHeadersContainer)"
        ></app-headers-list>
      </div>
    </div>
    <div class="d-flex flex-column w-50">
      <div class="mt-2 mb-2 ps-2">
        Proxy response headers
        <app-svg
          icon="info"
          ngbTooltip="Headers will be added to the response received from the proxied server"
          class="ms-2"
        ></app-svg>
      </div>
      <div
        class="flex-fill h-100 ps-2 scroll-content"
        #environmentProxyResHeadersContainer
      >
        <app-headers-list
          id="env-proxy-res-headers"
          [activeDataSubject$]="activeEnvironment$"
          dataSubject="environment"
          headersPropertyName="proxyResHeaders"
          (headersUpdated)="headersUpdated('proxyResHeaders', $event)"
          (headerAdded)="scrollToBottom(environmentProxyResHeadersContainer)"
        ></app-headers-list>
      </div>
    </div>
  </div>
</div>
